<template>
  <div class="MyNews" v-title data-title="消息中心">
    <div class="back">
      <div class="space">
        <el-tabs
          tab-position="left"
          v-model="active"
          @tab-click="handleClick"
          stretch
        >
          <!-- <el-tab-pane label="回复我的">回复我的</el-tab-pane> -->
          <el-tab-pane label="系统通知" name="0">
            <systemNotification />
          </el-tab-pane>
          <el-tab-pane label="我的消息" name="1">
            <div
              class="jwchat"
              style="
                margin: 0 auto;
                width: 93%;
                position: relative;
                display: inline-block;
              "
            >
              <JwChat-index
                v-model="inputMsg"
                :toolConfig="tool"
                :taleList="taleList"
                @enter="bindEnter"
                :config="config"
                :showRightBox="false"
                :winBarConfig="winBarConfig"
                @clickTalk="talkEvent"
                style="
                  width: 80%;
                  height: 456px;
                  min-width: 400px;
                  margin-left: 17.1%;
                "
              >
              </JwChat-index>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的留言" name="2">
            <div
              class="jwchat"
              style="
                margin: 0 auto;
                width: 93%;
                position: relative;
                display: inline-block;
              "
            > 
			<el-form
			  :model="basicInfoTemp"
			  status-icon 
			  ref="basicInfoTemp"
			>
			<el-form-item
			  label-width="60px"
			  prop="elucidationTemp"
			>
			  <el-col :span="18">
			    <el-input
			      type="text"
			      :rows="10"
			      placeholder="反馈标题"
			      v-model="basicInfoTemp.title"
			      style="width: 127.5%"
			      resize="none"
			    >
			    </el-input>
			  </el-col>
			</el-form-item>
			
			<el-form-item 
			  label-width="60px" 
			>
			  <el-col :span="18">
			    <el-input
			      type="textarea"
			      :rows="10"
			      placeholder="请输入您的对本系统的意见"
			      v-model="basicInfoTemp.content"
			      style="width: 127.5%"
			      resize="none"
			    >
			    </el-input>
			  </el-col>
			</el-form-item>
			
			<div
			  style="
			    margin-top: 10px;
			    margin-left: auto;
			    text-align: center;
			  "
			>
			  <el-button
				type="primary"
				size="middle"
				@click="basicInfoSave('basicInfoTemp')"
			  >
				保 存
			  </el-button>
             </div>
			
             </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import base from "../../api/base";
import api from "../../api";
import systemNotification from "../../components/MyNewsPage/SystemNotification.vue";
import { mapState } from "vuex";
export default {
  components: { systemNotification },
  data() {
    return {
	  basicInfoTemp:{},
      active: "0",
      userId: "",
      hisUserId: "",
      // 输入框中的文字
      inputMsg: "",
      // 会话内容
      taleList: [],
      // 组件配置
      config: {
        //聊天顶部默认显示信息
        img: "",
        name: "我的消息",
        historyConfig: {
          show: true,
          tip: "滚动到顶时候显示的提示",
          callback: this.bindLoadHistory(), //加载历史聊天记录
        },
      },
      //左侧聊天用户信息
      winBarConfig: {
        active: "", // 当前选中
        width: "160px", // 宽度大小
        listHeight: "60px", // 单个高度
        // 用户列表
        list: [],
        callback: this.bindWinBar,
      },
      OwOlist: [
        //表情包和表情路径
        { title: "微笑", url: "weixiao.gif" },
        { title: "嘻嘻", url: "xixi.gif" },
        { title: "哈哈", url: "haha.gif" },
        { title: "可爱", url: "keai.gif" },
        { title: "可怜", url: "kelian.gif" },
        { title: "挖鼻", url: "wabi.gif" },
        { title: "吃惊", url: "chijing.gif" },
        { title: "害羞", url: "haixiu.gif" },
        { title: "挤眼", url: "jiyan.gif" },
        { title: "闭嘴", url: "bizui.gif" },
        { title: "鄙视", url: "bishi.gif" },
        { title: "爱你", url: "aini.gif" },
        { title: "泪", url: "lei.gif" },
        { title: "偷笑", url: "touxiao.gif" },
        { title: "亲亲", url: "qinqin.gif" },
        { title: "生病", url: "shengbing.gif" },
        { title: "太开心", url: "taikaixin.gif" },
        { title: "白眼", url: "baiyan.gif" },
        { title: "右哼哼", url: "youhengheng.gif" },
        { title: "左哼哼", url: "zuohengheng.gif" },
        { title: "嘘", url: "xu.gif" },
        { title: "衰", url: "shuai.gif" },
        { title: "吐", url: "tu.gif" },
        { title: "哈欠", url: "haqian.gif" },
        { title: "抱抱", url: "baobao.gif" },
        { title: "怒", url: "nu.gif" },
        { title: "疑问", url: "yiwen.gif" },
        { title: "馋嘴", url: "chanzui.gif" },
        { title: "拜拜", url: "baibai.gif" },
        { title: "思考", url: "sikao.gif" },
        { title: "汗", url: "han.gif" },
        { title: "困", url: "kun.gif" },
        { title: "睡", url: "shui.gif" },
        { title: "钱", url: "qian.gif" },
        { title: "失望", url: "shiwang.gif" },
        { title: "酷", url: "ku.gif" },
        { title: "色", url: "se.gif" },
        { title: "哼", url: "heng.gif" },
        { title: "鼓掌", url: "guzhang.gif" },
        { title: "晕", url: "yun.gif" },
        { title: "悲伤", url: "beishang.gif" },
        { title: "抓狂", url: "zhuakuang.gif" },
        { title: "黑线", url: "heixian.gif" },
        { title: "阴险", url: "yinxian.gif" },
        { title: "怒骂", url: "numa.gif" },
        { title: "互粉", url: "hufen.gif" },
        { title: "书呆子", url: "shudaizi.gif" },
        { title: "愤怒", url: "fennu.gif" },
        { title: "感冒", url: "ganmao.gif" },
        { title: "心", url: "xin.gif" },
        { title: "伤心", url: "shangxin.gif" },
        { title: "猪", url: "zhu.gif" },
        { title: "熊猫", url: "xiongmao.gif" },
        { title: "兔子", url: "tuzi.gif" },
        { title: "喔克", url: "ok.gif" },
        { title: "耶", url: "ye.gif" },
        { title: "棒棒", url: "good.gif" },
        { title: "不", url: "no.gif" },
        { title: "赞", url: "zan.gif" },
        { title: "来", url: "lai.gif" },
        { title: "弱", url: "ruo.gif" },
        { title: "草泥马", url: "caonima.gif" },
        { title: "神马", url: "shenma.gif" },
        { title: "囧", url: "jiong.gif" },
        { title: "浮云", url: "fuyun.gif" },
        { title: "给力", url: "geili.gif" },
        { title: "围观", url: "weiguan.gif" },
        { title: "威武", url: "weiwu.gif" },
        { title: "话筒", url: "huatong.gif" },
        { title: "蜡烛", url: "lazhu.gif" },
        { title: "蛋糕", url: "dangao.gif" },
        { title: "发红包", url: "fahongbao.gif" },
      ],
      tool: {},
    };
  },
  computed: {
    ...mapState("login", ["user"]),
  },
  methods: {
    analyzeEmoji: function (cont) {
      var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
      var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
      var content = cont.match(pattern1);
      var str = cont;
      if (content) {
        for (var i = 0; i < content.length; i++) {
          for (var j = 0; j < this.OwOlist.length; j++) {
            if ("[" + this.OwOlist[j].title + "]" == content[i]) {
              var src = require("@/static/emoji/" + this.OwOlist[j].url);
              break;
            }
          }
          str = str.replace(pattern2, '<img src="' + src + '"/>');
        }
      }
      return str;
    },
    // 切换用户窗口，加载对应的历史记录
    bindWinBar(play = {}) {
      const { type, data = {} } = play;
      console.log(play);
      if (type === "winBar") {
        var userId = data.id;
        var name = data.name;
        var img = data.img;
        data.readNum = 0;
        this.hisUserId = userId;
        this.config = { userId, img, name }; //加载对应的聊天窗口顶部信息
        this.winBarConfig.active = userId; //根据id切换聊天窗口
        //加载聊天记录
        let param = new URLSearchParams();
        param.append("myUserId", this.userId);
        param.append("hisUserId", userId);
        param.append("mesgStartIndex", 1000);
        param.append("mesgNum", 0);
        api.getMesgs(param).then((res) => {
          console.log(res.data);
          this.taleList = JSON.parse(
            JSON.stringify(res.data)
              .replace(/mesgTime/g, "date")
              .replace(/content/g, "text")
          );
          for (let i = 0; i < this.taleList.length; i++) {
            if (!this.taleList[i].mine) {
              this.taleList[i].img = img;
              this.taleList[i].name = name;
            } else {
              this.taleList[i].img = base.baseUrl + this.user.imageURL;
              this.taleList[i].name = this.user.nickname;
            }
            this.taleList[i].text = {
              text: this.analyzeEmoji(this.taleList[i].text),
            };
          }
          console.log(this.taleList);
        });
      }
      if (type === "winBtn") {
        const { target: { id } = {} } = data;
        const { list } = this.winBarConfig;
        this.winBarConfig.list = list.reduce((p, i) => {
          if (id != i.id) p.push(i);
          return p;
        }, []);
      }
    },
    // 点击聊天框列中的用户和昵称触发事件
    talkEvent(play) {
      // console.log(play);
    },
    // 输入框点击就发送或者回车触发的事件
    bindEnter(e) {
      // console.log(e);
      const msg = this.inputMsg;
      if (!msg) return;
      const msgObj = {
        date: this.getTime(), //发送消息时间
        text: { text: this.analyzeEmoji(msg) }, //发送的消息
        mine: true, //是否本人
        name: base.baseUrl + this.user.nickname, //发送者ID
        img: base.baseUrl + this.user.imageURL, //发送者头像
      };
      //将发送的消息压入聊天记录this.taleList中，并上传到数据库
      this.taleList.push(msgObj);
      let param = new URLSearchParams();
      param.append("myUserId", this.userId);
      param.append("hisUserId", this.hisUserId);
      param.append("content", this.inputMsg);
      api.sendText(param).then((res) => {
        if (res.data == "0") {
          return;
        } else {
        }
      });
    },
    //加载历史聊天记录
    bindLoadHistory() {
      return;
    },
    getTime() {
      let time = "";
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      time = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      return time;
    },
    handleClick(tab) {
      this.$router.push({
        path: "/mynews",
        query: {
          active: this.active,
        },
      });
    },
    basicInfoSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //保存基本信息
          let param = new URLSearchParams();
          param.append("userId",this.userId);
          param.append("title", this.basicInfoTemp.title);
          param.append("content", this.basicInfoTemp.content);
          api.saveFeedback(param).then((res) => {
            if (res.data == "1") {
              this.$message({
                message: "保存成功!",
                type: "success",
              });
			   this.basicInfoTemp.title="";
			   this.basicInfoTemp.content="";
            }
          });
        } else {
          return;
        }
      });
    },
  },
  created() {
    // 从数据库获取当前用户的聊天信息将winBarConfig.list初始化
    this.userId = this.user.userId;
    let param = new URLSearchParams();
    param.append("userId", this.userId);
    api.getChatList(param).then((res) => {
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].imageURL = base.baseUrl + res.data[i].imageURL;
      }
      this.winBarConfig.list = JSON.parse(
        JSON.stringify(res.data)
          .replace(/imageURL/g, "img")
          .replace(/unreadCount/g, "readNum")
      );
      let play = {
        type: "winBar",
        data: {
          id: this.winBarConfig.list[0].id,
          img: this.winBarConfig.list[0].img,
          isOnline: this.winBarConfig.list[0].isOnline,
          name: this.winBarConfig.list[0].name,
          readNum: this.winBarConfig.list[0].readNum,
        },
      };
      this.bindWinBar(play);
    });
    if (this.$route.query.active != "") {
      this.active = this.$route.query.active;
    }
  },
};
</script>

<style lang="less">
.MyNews {
  border-radius: 4px;
  padding-bottom: 20px;
  width: 100%;
  min-height: 100%;
  overflow: auto;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
  // border: 1px solid #ddd;
  background-color: snow;
  .back {
    // width: 100%;
    // height: 100%;
    // position: fixed;
    // box-sizing: border-box;
    // // background: url("http://8.130.171.48:8080/img/BG.jpg");
    // z-index: 10;
    margin-top: 35px;
    .space {
      margin: 0 auto;
      width: 100%;
      min-width: 600px;
      height: 565px;
      margin-top: 10px;
      margin-bottom: 10px;
      .el-tabs--left .el-tabs__item.is-left {
        text-align: center;
        width: 200px;
        height: 44px;
        font-size: 14px;
      }
      .ChatPage {
        height: 80%;
        .windowBar {
          border: 1px solid #dcdfe6;
        }
        .main {
          height: 300px;
          .chatBox {
            width: 100%;
            .chatPage {
              height: 435px !important;
              width: 100% !important;
              margin: 0;
              .wrapper {
                height: 300px !important;
                width: 100% !important;
                .web__main {
                  width: 100% !important;
                  padding: 0.3rem !important;
                  cite i {
                    padding-left: 15px;
                    padding-right: 0;
                  }
                }
              }
              .toolBox {
                height: 100px !important;
                .web__msg-input {
                  height: 40px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>